﻿
@{
    ViewBag.Title = "Register";
    Layout = "~/Views/Shared/_Login.cshtml";
}

<form id="form" action="/Login/Regist" method="post" >
    <div class="register-box">
        <label for="username" class="username_label">
            用 户 名
            <input maxlength="20" name="name" type="text" placeholder="您的用户名和登录名" />
        </label>
        <div class="tips">

        </div>
    </div>
    <div class="register-box">
        <label for="address" class="other_label">
            地 址
            <input maxlength="30" name="address" style="width:250px" type="text" placeholder="您的收货地址（仅限光明社区内）" />
        </label>
        <div class="tips">

        </div>
    </div>
    <div class="register-box">
        <label for="username" class="other_label">
            设 置 密 码
            <input maxlength="20" type="password" placeholder="建议至少使用两种字符组合" />
        </label>
        <div class="tips">

        </div>
    </div>
    <div class="register-box">
        <label for="username" class="other_label">
            确 认 密 码
            <input maxlength="20" name="pwd" type="password" placeholder="请再次输入密码" />
        </label>
        <div class="tips">

        </div>
    </div>
    <div class="register-box">
        <label for="username" class="other_label">
            <span>中国 0086∨</span>
            <input class="phone" name="phone" maxlength="20" type="text" placeholder="建议使用常用手机" />
        </label>
        <div class="tips">

        </div>
    </div>
    <div class="register-box">
        <label for="username" class="other_label">
            验 证 码
            <input maxlength="20" type="text" placeholder="请输入验证码" />
        </label>
        <span id="code"></span>
        <div class="tips">

        </div>
    </div>
    <div class="submit_btn">
        <button type="button" id="submit_btn">立 即 注 册</button>
    </div>
</form>

<script>
    var nameList = [];
    $(function () {
        getNames();

        $('[name="name"]').eq(0).blur(function () {
            if ($(this).val().length == 0) {
                $(this).parent().next("div").text("");
                $(this).parent().next("div").css("color", '#ccc');
            } else if ($(this).val().length > 0 && $(this).val().length < 2) {
                $(this).parent().next("div").text("长度只能在2-20个字符之间");
                $(this).parent().next("div").css("color", 'red');
            } else if ($(this).val().length >= 2 && !isNaN($(this).val())) {
                $(this).parent().next("div").text("用户名不能为纯数字");
                $(this).parent().next("div").css("color", 'red');
            } else {
   
                for (var m = 0; m < nameList.length; m++) {

                    if ($(this).val() == nameList[m]) {
                        $(this).parent().next("div").text("该用户名已被注册");
                        $(this).parent().next("div").css("color", 'red');
                        return;
                    }
                }
                $(this).parent().next("div").text("");
            }
        })
    });

    
    function getNames() {
        $.ajax({
            type: 'post',
            url: '/Login/GetNames',
            async: true,
            dataType: 'json',
            success: function (data) {
                var i = 0;
                while (data[i] != null)
                    nameList.push(data[i++]); 
            }
        });
    }
</script>
<script src="~/Content/js/index.js" type="text/javascript" charset="utf-8"></script>